<template>
  <div>
    <el-row>
      <search v-model="form">
        <template slot="item">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword" placeholder="关键字"></el-input>
          </el-form-item>
        </template>
        <template slot="btns">
          <el-button type="primary" @click="addMenu" v-if="$hasButton('add')">添加</el-button>
        </template>
      </search>

      <el-card class="small-card card-margin">
        <div style="margin-bottom: 10px;padding-left: 15px" v-if="chooseList.length > 0">
          <el-button size="mini" type="danger" @click="removeList">删除{{chooseList.length}}条</el-button>
        </div>
        <vxe-table border
                   show-overflow
                   ref="xTree"
                   row-id="uuid"
                   :tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o',accordion: true}"
                   :checkbox-config="{labelField: 'procedureName',checkStrictly: true}"
                   @checkbox-change="selectChangeEvent"
                   :data="table.list">
          <vxe-table-column type="checkbox" title="流程名" tree-node></vxe-table-column>
          <vxe-table-column field="keyName" title="key"></vxe-table-column>
          <vxe-table-column field="describ" title="描述"></vxe-table-column>
          <vxe-table-column field="addTime" title="添加时间"></vxe-table-column>
          <vxe-table-column field="status" title="状态"></vxe-table-column>
          <vxe-table-column title="操作" width="300">
            <template v-slot="{ row}">
              <el-button size="mini" @click="handleEdit( row)" v-if="$hasButton('edit')">编辑</el-button>
              <el-button size="mini" @click="handleStep( row)" v-if="$hasButton('edit')">流程步骤设置</el-button>
              <el-button size="mini" type="danger" @click="handleDelete( row)" v-if="$hasButton('remove')">删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
      <mform v-model="form" :type="editType" :title="title" :show.sync="visible" width="35%" v-if="visible" @refresh="getTableList"></mform>
      <step v-model="form" :title="stepDialog.title" :show.sync="stepDialog.visible" v-if="stepDialog.visible"></step>
    </el-row>
  </div>
</template>

<script>
  import search from '@/components/my/TopSerach'
  import { APPROVAL } from '@/api'
  import mform from './form'
  import step from './step'

  export default {
    components: {
      search,
      mform,
      step
    },
    data() {
      return {
        editType: 0,
        visible: false,
        chooseList: [],
        title: '添加',
        form: {},
        table: {
          list: []
        },
        stepDialog: {
          visible: false,
          title: '流程步骤'
        }
      }
    },
    computed: {},
    mounted() {
      this.getTableList()
    },
    watch: {
      form(v) {
      }
    },
    methods: {
      getTableList() {
        APPROVAL.list().then(res => {
          if (res.code === 200) {
            this.table.list = res.data
          }
        })
      },
      handleEdit(row) {
        this.form = row
        this.visible = true
        this.title = '编辑'
        this.editType = 1
      },
      handleview(row) {
        this.form = row
        this.visible = true
        this.title = '详情'
        this.editType = 2
      },
      handleDelete(row) {
        this.$confirm(`确定要删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          APPROVAL.remove([row.uuid]).then(res => {
            if (res.code === 200 ) {
              this.$message.success(res.message)
              this.getTableList()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
        })
      },
      addMenu() {
        this.form = {
          status: 1
        }
        this.title = '添加'
        this.editType = 0
        this.visible = true
      },
      addChileren(row) {
        this.form = {

        }
        this.editType = 0
        this.visible = true
      },
      removeList() {
      },
      selectChangeEvent(val) {
        console.log(val)

      },
      handleStep(row) {
        this.stepDialog.visible = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*.small-card {*/
  /*  ::v-deep .el-card__body {*/
  /*    padding: 10px;*/
  /*  }*/
  /*}*/

  .el-form {
    ::v-deep .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
